<template>
  <div>
    <el-row style=";background:#FFFFFF">
      <el-row></el-row>
      <el-table :data="mTableData" v-loading="mTableLoading" border style="width: 100%">
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="申请部门" prop="applyUpPartmentName"></el-table-column>
        <el-table-column label="申请科室" prop="applyPartmentName"></el-table-column>
        <el-table-column label="申请人" prop="applyUserName"></el-table-column>
        <el-table-column label="联系电话" prop="tel" width="120"></el-table-column>
        <el-table-column label="乘车人" prop="strPassenger1"></el-table-column>
        <el-table-column label="乘车地点" prop="setoffAddress" width="180"></el-table-column>
        <el-table-column label="到达地点" prop="arrivalAddress" width="180"></el-table-column>

        <el-table-column label="发车时间" prop="setoffTime" width="140"></el-table-column>
        <el-table-column label="返回时间" prop="backTime" width="140"></el-table-column>

        <el-table-column label="需要车辆" prop="requstCarNum"></el-table-column>
        <el-table-column label="乘客数量" prop="passengersNum"></el-table-column>
        <!-- <el-table-column label="用车要求" prop="note"></el-table-column> -->
        <el-table-column label="创建时间" prop="createTime" width="100"></el-table-column>
        <el-table-column label="里程" prop="totalKM"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row v-if="scope.row.status=='allowed'">
              <el-button
                v-if="!scope.row.thirdCompanyId"
                @click="showCtrlDialog(scope.row)"
                type="text"
              >
                <span class="FontBase">安排车辆</span>
              </el-button>
              <span v-else>{{scope.row.thirdCompanyName}}调度中</span>
            </el-row>
            <el-row v-if="scope.row.status=='travelEnded'">
              <el-button
                type="text"
                @click="$refs.refOrderDetailDialog.showOrderDetailDialog(scope.row)"
              >
                <span class="FontBase">确认里程</span>
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px;padding-bottom:10px">
        <el-pagination
          style="float:right"
          v-if="totalPage"
          background
          layout="prev, pager, next,jumper"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>
        <span
          v-if="totalPage"
          style="float:right;font-size:14px;margin-top:5px;color:#606266;margin-right:20px"
        >
          共&nbsp;
          <span style="color:#F56C6C">{{totalPage}}</span>&nbsp;页/&nbsp;
          <span style="color:#F56C6C">{{totalCount}}</span>&nbsp;条数据
        </span>
      </el-row>
    </el-row>

    <!-- // 调度对话框 -->

    <el-dialog title="车辆调度" :visible.sync="mDispatchDialog" width="40%">
      <div class="borderMain">
        <el-row>
          <el-col :span="4" class="borderAround">申请人</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.applyUserName}}</el-col>
          <el-col :span="4" class="borderAround">申请部门</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.applyPartmentName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">联系电话</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.tel}}</el-col>
          <el-col :span="4" class="borderAround">用车人数</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.passengersNum}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">用车类型</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.orderType}}</el-col>
          <el-col :span="4" class="borderAround">需要车辆数</el-col>
          <el-col :span="8" class="borderAround">2</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">出发地</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.setoffAddress}}</el-col>
          <el-col :span="4" class="borderAround">目的地</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.arrivalAddress}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">出发时间</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.setoffTime}}</el-col>
          <el-col :span="4" class="borderAround">预计返回时间</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.backTime}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">申请事由</el-col>
          <el-col :span="20" class="borderAround">{{mSelectRow.applyReason}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">备注说明</el-col>
          <el-col :span="20" class="borderAround">{{mSelectRow.note}}</el-col>
        </el-row>
      </div>
      <div style="margin-top:10px">
        <el-tabs v-model="mActiveTabName" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="调度" name="first">
            <el-table :data="mTmpCtrls" border style="width: 100%">
              <el-table-column label="车辆">
                <template slot-scope="scope">
                  <div v-if="scope.row.opType=='add'">
                    <el-link
                      type="primary"
                      v-if="!scope.row.car"
                      @click="showCarSelelctDialog()"
                    >点击选择车辆</el-link>

                    <el-link
                      v-else
                      type="primary"
                      @click="showCarSelelctDialog()"
                    >{{scope.row.car.name}}</el-link>
                  </div>
                  <div v-else>
                    <span>{{scope.row.car.name}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="drivername" label="司机">
                <template slot-scope="scope">
                  <div v-if="scope.row.opType=='add'">
                    <el-link
                      type="primary"
                      v-if="!scope.row.driver"
                      @click="showDriverSelelctDialog()"
                    >点击选择司机</el-link>

                    <el-link
                      v-else
                      type="primary"
                      @click="showDriverSelelctDialog()"
                    >{{scope.row.driver.name}}</el-link>
                  </div>
                  <div v-else>
                    <span>{{scope.row.driver.name}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="op" label="操作">
                <template slot-scope="scope">
                  <!-- <div v-if="scope.row.opType=='add'"> -->
                  <div v-if="scope.row.driver&&scope.row.car">
                    <el-button
                      size="small"
                      plain
                      type="primary"
                      @click="confirmAddLine()"
                      v-if="scope.row.opType=='add'"
                    >确认</el-button>
                    <el-button size="small" plain type="danger" @click="delfirmLine(scope.index)">移除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top:20px">
              <el-button type="primary" style="float:right" @click="dispatchOrder()">确认安排</el-button>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="三方调度" name="second">
            <el-row>
              <el-form ref="form" label-width="0px">
                <el-form-item label>
                  <el-select v-model="mSelectRow.thirdCompanyId" placeholder="选择要派发的三方租赁公司">
                    <el-option
                      v-for="item in mThridCompany"
                      :key="item.companyId"
                      :label="item.companyName"
                      :value="item.companyId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row style="margin-top:20px">
              <el-button type="primary" style="float:right" @click="dispatchThirdCompany()">确认分配</el-button>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="关闭行程" name="third">
            <el-row>
              <el-form ref="form" label-width="0px">
                <el-form-item label>
                  <el-input v-model="mSelectRow.closeReason" placeholder="填写关闭原因"></el-input>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row style="margin-top:20px">
              <el-button type="primary" style="float:right" @click="closeOrder()">确认关闭</el-button>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

    <!-- 选择车辆对话框 -->
    <el-dialog title="车辆选择" :visible.sync="mCarSelectDialog" width="90%">
      <el-row style="padding:10px">
        <el-col :span="8">
          <i
            v-if="mCurrentDateCar> mTodayDate"
            class="el-icon-caret-left"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="preDayCar()"
          ></i>
          <el-date-picker
            v-model="mCurrentDateCar"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width:70%;float:left;"
          ></el-date-picker>
          <i
            class="el-icon-caret-right"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="nextDayCar()"
          ></i>
          <el-button
            type="primary"
            plain
            size="mini"
            style="float:left;font-size:16px;"
            @click="today()"
          >今日</el-button>
        </el-col>
        <el-col :span="6">
          <el-input
            size="small"
            v-model="mSearchCarKey"
            placeholder="输入关键字"
            clearable
            style="width:90%;padding-left:0px"
          ></el-input>
        </el-col>
        <el-col :span="10" style="padding-left:0px">
          <el-button size="small" icon="el-icon-search" circle type="primary" @click="searchCars()"></el-button>
        </el-col>
      </el-row>
      <el-table :data="mCars" border style="width: 100%">
        <el-table-column label="编号" prop="carId" width="90"></el-table-column>
        <el-table-column label="车牌" prop="chepai" width="120"></el-table-column>
        <!-- <el-table-column label="车辆类别" prop="type"></el-table-column> -->
        <el-table-column label="车辆品牌" prop="brand" width="120"></el-table-column>
        <el-table-column label="车辆型号" prop="name" width="90"></el-table-column>
        <el-table-column label="座位数" prop="sites" width="90"></el-table-column>
        <!-- <el-table-column label="车辆状态" prop="strStatus"></el-table-column> -->
        <!-- <el-table-column label="使用状态" prop="strCarUsingStatus"></el-table-column> -->
        <!-- <el-table-column label="所属公司" prop="companyName"></el-table-column> -->
        <el-table-column label="0-7时" width="90" prop="s0_7">
          <template slot-scope="scope">
            <div :class="[scope.row.s0_7==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="8时" width="60" prop="s8">
          <template slot-scope="scope">
            <div :class="[scope.row.s8==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="9时" width="60" prop="s9">
          <template slot-scope="scope">
            <div :class="[scope.row.s9==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="10时" width="60" prop="s10">
          <template slot-scope="scope">
            <div :class="[scope.row.s10==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="11时" width="60" prop="s11">
          <template slot-scope="scope">
            <div :class="[scope.row.s11==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="12时" width="60" prop="s12">
          <template slot-scope="scope">
            <div :class="[scope.row.s12==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="13时" width="60" prop="s13">
          <template slot-scope="scope">
            <div :class="[scope.row.s13==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="14时" width="60" prop="s14">
          <template slot-scope="scope">
            <div :class="[scope.row.s14==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="15时" width="60" prop="s15">
          <template slot-scope="scope">
            <div :class="[scope.row.s15==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="16时" width="60" prop="s16">
          <template slot-scope="scope">
            <div :class="[scope.row.s16==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="17时" width="60" prop="s17">
          <template slot-scope="scope">
            <div :class="[scope.row.s17==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="18时" width="60" prop="s18">
          <template slot-scope="scope">
            <div :class="[scope.row.s18==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="19时" width="60" prop="s19">
          <template slot-scope="scope">
            <div :class="[scope.row.s19==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="20时" width="60" prop="s20">
          <template slot-scope="scope">
            <div :class="[scope.row.s20==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="21-0时" width="90" prop="s21_0">
          <template slot-scope="scope">
            <div :class="[scope.row.s21_0==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.carUsingStatus=='free'"
              type="text"
              @click="selectCar(scope.row)"
            >选择</el-button>
            <span v-else-if="scope.row.carUsingStatus=='using'">不可选</span>
            <span v-if="scope.row.carUsingStatus=='using1'">已选择</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px">
        <el-pagination
          style="float:left"
          v-if="totalPageCar"
          background
          layout="prev, pager, next"
          @current-change="pageCarIndexChange()"
          :current-page.sync="pageCar"
          :page-count="totalPageCar"
        ></el-pagination>
      </el-row>
    </el-dialog>
    <!-- 选择司机对话框 -->
    <el-dialog title="司机选择" :visible.sync="mDriverSelectDialog" width="90%">
      <el-row style="padding:10px">
        <el-col :span="8">
          <i
            v-if="mCurrentDateDriver> mTodayDate"
            class="el-icon-caret-left"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="preDayDriver()"
          ></i>
          <el-date-picker
            v-model="mCurrentDateDriver"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width:70%;float:left;"
          ></el-date-picker>
          <i
            class="el-icon-caret-right"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="nextDayCarDriver()"
          ></i>
          <el-button
            type="primary"
            plain
            size="mini"
            style="float:left;font-size:16px;"
            @click="today()"
          >今日</el-button>
        </el-col>
        <el-col :span="6">
          <el-input
            size="small"
            v-model="mSearchDriverKey"
            placeholder="姓名或电话"
            clearable
            style="width:90%;padding-left:0px"
          ></el-input>
        </el-col>
        <el-col :span="10" style="padding-left:0px">
          <el-button
            size="small"
            icon="el-icon-search"
            circle
            type="primary"
            @click="searchDrivers()"
          ></el-button>
        </el-col>
      </el-row>
      <el-table :data="mDrivers" border style="width: 100%">
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <!-- <el-table-column label="性别" prop="sex"></el-table-column> -->
        <!-- <el-table-column label="身份证" prop="IDCARD"></el-table-column> -->
        <!-- <el-table-column label="证件类型" prop="driverCardType"></el-table-column> -->
        <el-table-column label="手机" prop="tel"></el-table-column>
        <!-- <el-table-column label="籍贯" prop></el-table-column> -->
        <!-- <el-table-column label="家庭住址" prop></el-table-column> -->
        <!-- <el-table-column label="状态" prop="strStatus"></el-table-column> -->
        <!-- <el-table-column label="所属公司" prop="companyName"></el-table-column> -->

        <el-table-column label="0-7时" width="90" prop="s0_7">
          <template slot-scope="scope">
            <div :class="[scope.row.s0_7==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="8时" width="60" prop="s8">
          <template slot-scope="scope">
            <div :class="[scope.row.s8==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="9时" width="60" prop="s9">
          <template slot-scope="scope">
            <div :class="[scope.row.s9==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="10时" width="60" prop="s10">
          <template slot-scope="scope">
            <div :class="[scope.row.s10==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="11时" width="60" prop="s11">
          <template slot-scope="scope">
            <div :class="[scope.row.s11==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="12时" width="60" prop="s12">
          <template slot-scope="scope">
            <div :class="[scope.row.s12==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="13时" width="60" prop="s13">
          <template slot-scope="scope">
            <div :class="[scope.row.s13==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="14时" width="60" prop="s14">
          <template slot-scope="scope">
            <div :class="[scope.row.s14==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="15时" width="60" prop="s15">
          <template slot-scope="scope">
            <div :class="[scope.row.s15==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="16时" width="60" prop="s16">
          <template slot-scope="scope">
            <div :class="[scope.row.s16==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="17时" width="60" prop="s17">
          <template slot-scope="scope">
            <div :class="[scope.row.s17==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="18时" width="60" prop="s18">
          <template slot-scope="scope">
            <div :class="[scope.row.s18==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="19时" width="60" prop="s19">
          <template slot-scope="scope">
            <div :class="[scope.row.s19==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="20时" width="60" prop="s20">
          <template slot-scope="scope">
            <div :class="[scope.row.s20==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="21-0时" width="90" prop="s21_0">
          <template slot-scope="scope">
            <div :class="[scope.row.s21_0==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text">选择</el-button> -->
            <el-button
              v-if="scope.row.userUseStatus=='free'"
              type="text"
              @click="selectDriver(scope.row)"
            >选择</el-button>
            <span v-if="scope.row.userUseStatus=='using'">不可选</span>
            <span v-if="scope.row.userUseStatus=='using1'">已选择</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px">
        <el-pagination
          style="float:left"
          v-if="totalPageDriver"
          background
          layout="prev, pager, next"
          @current-change="pageDriverIndexChange()"
          :current-page.sync="pageDriver"
          :page-count="totalPageDriver"
        ></el-pagination>
      </el-row>
    </el-dialog>

    <v-OrderDetailDialog
      ref="refOrderDetailDialog"
      @refreshOrderNumberEvent3="queryControllerOrders(arguments)"
    ></v-OrderDetailDialog>
  </div>
</template>


<style >
.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
.spanPoint {
  cursor: pointer;
}
.borderMain {
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.borderAround {
  padding: 10px;
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.ctrlCard {
}
.carDotGreen {
  width: 15px;
  height: 15px;
  background: #14b38f;
}

.carDotYellow {
  width: 15px;
  height: 15px;
  background: #ff8a22;
}
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
} from "../../api/user.js";
import { getCarsApi } from "../../api/car.js";
import { turnOrderStatus } from "../../api/orderHelper.js";
import {
  getNowFormatDate,
  getWeekToday,
  dateFormat,
  formatDateFromDate,
} from "../../api/util.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi,
} from "../../api/order.js";
import { Loading } from "element-ui";
import OrderDetailDialog from "./OrderDetailDialog.vue";
export default {
  data() {
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 15,

      pageCar: 1,
      totalPageCar: 0,
      pagesizeCar: 8,

      pageDriver: 1,
      totalPageDriver: 0,
      pagesizeDriver: 8,

      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mActiveTabName: "first",
      mTmpCtrls: [],
      mCarSelectDialog: false,
      mDriverSelectDialog: false,
      mDriverFilter: {},
      mCarFilter: {},
      totalCount: 0,
      mSearchDriverKey: undefined,
      mSearchCarKey: undefined,
      mCurrentDateCar: undefined,
      mTodayDate: undefined,
      mCurrentDateDriver: undefined,
    };
  },
  components: {
    "v-OrderDetailDialog": OrderDetailDialog,
  },
  created() {
    this.mTodayDate = getNowFormatDate();
    this.mCurrentDateCar = getNowFormatDate();
    this.mCurrentDateDriver = getNowFormatDate();
  },
  mounted() {
    this.getThridCompany();
    // this.queryControllerOrders();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    setPagesize(size) {
      this.page = 1;
      this.pagesize = size;
      this.queryControllerOrders();
    },
    pageIndexChange() {
      // this.page = this.mUiPageIndex - 1;
      this.queryControllerOrders();
    },
    queryControllerOrders() {
      var that = this;
      that.mTableLoading = true;
      // that.showFullLoading();
      var filter = {};
      queryControllerOrdersApi(
        this.page,
        this.pagesize,
        ["allowed", "travelEnded"],
        "2020-01-01 00:00:00",
        getNowFormatDate() + " 23:59:59",
        filter,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            // that.clsoeFullLoading();
            that.mTableLoading = false;
            that.page = data.currentPage;
            that.totalCount = data.totalCount;
            that.totalPage = data.totalPage;
            data.list.forEach((element) => {
              element.strstatus = turnOrderStatus(element.status);
              if (element.passengers && typeof element.passengers == "string") {
                element.passengers = JSON.parse(element.passengers);
              }
              if (element.passengers && element.passengers.length > 0) {
                element.strPassenger1 = element.passengers[0].name;
              } else {
                element.strPassenger1 = "-";
              }
              if (element.totalKM) {
                element.totalKM += "KM";
              } else {
                element.totalKM = "-";
              }
            });
            that.mTableData = data.list;
            // 需要更新主页
            that.$emit("refreshOrderNumberEvent2", "2");
          };
          this.fail = function (msg) {
            // that.clsoeFullLoading();
            that.mTableLoading = false;
            that.mTableData = [];
          };
        })()
      );
    },
    selectRow(order) {
      this.mSelectRow = order;
      this.mDispatchDialog = true;
      this.mCdmMap = [];
      var item = {};
      item.index = 0;
      this.mCdmMap.push(item);
      this.getDrivers();
      this.getCars();
    },
    addLine() {
      var item = {};
      item.index = this.mCdmMap.length;
      this.mCdmMap.push(item);
    },
    getThridCompany() {
      var that = this;
      getThirdCompanyApi(
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.mThridCompany = data;
          };
          this.fail = function (msg) {};
        })()
      );
    },
    getDrivers() {
      var that = this;
      this.mDriverFilter.orderId = this.mSelectRow.id;
      getDriversApi(
        this.pageDriver,
        this.pagesizeDriver,
        this.mDriverFilter,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.pageDriver = data.currentPage;
            that.totalPageDriver = data.totalPage;
            that.mDrivers = that.refreshDrivers(data.list);
          };
          this.fail = function (msg) {};
        })()
      );
    },
    getCars() {
      var that = this;
      this.mCarFilter.orderId = this.mSelectRow.id;
      this.mCarFilter.isDel = "1";
      getCarsApi(
        this.pageCar,
        this.pagesizeCar,
        this.mCarFilter,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.pageCar = data.currentPage;
            that.totalPageCar = data.totalPage;
            that.mCars = undefined;
            that.mCars = that.refreshCars(data.list);
          };
          this.fail = function (msg) {};
        })()
      );
    },
    // refreshCars(lst) {
    //   var that = this;
    //   var result = [];
    //   // lst.forEach(element => {
    //   //   element.str =
    //   //     element.brand + " " + element.name + " (" + element.chepai + ")";
    //   //   if (
    //   //     that.mSelectRow.id != element.orderId &&
    //   //     element.status == "using"
    //   //   ) {
    //   //   } else {
    //   //     result.push(element);
    //   //   }
    //   // });
    //   return lst;
    // },
    // refreshDrivers(lst) {
    //   var that = this;
    //   var result = [];
    //   // lst.forEach(element => {
    //   //   if (
    //   //     that.mSelectRow.id != element.orderId &&
    //   //     element.status == "using"
    //   //   ) {
    //   //   } else {
    //   //     result.push(element);
    //   //   }
    //   // });
    //   return lst;
    // },
    deleteDispatchRow(row) {
      // this.mCdmMap.$remove(row);
      this.mCdmMap.splice(this.mCdmMap.indexOf(row), 1);
    },
    dispatchOrder() {
      var that = this;
      console.log(JSON.stringify(this.mTmpCtrls, null, 2));

      // 计算得到对应关系
      var mapArray = [];
      var existAdd = false;
      this.mTmpCtrls.forEach((element) => {
        if (element.driver && element.car && element.opType == "show") {
          var userId = element.driver.userId;
          var carId = element.car.carId;
          var rl = {};
          rl.userId = userId;
          rl.carId = carId;
          mapArray.push(rl);
        } else {
          if (element.driver || element.car) {
            existAdd = true;
          }
        }
      });
      if (existAdd) {
        that.$message.error("请确认分配关系");
        return;
      }
      if (mapArray.length == 0) {
        that.$message.error("请确认分配关系");
        return;
      }

      // 判断出是否有分配重复的
      {
        var hash = {};
        for (var i in this.mapArray) {
          if (hash[this.mapArray[i].userId]) {
            that.$message.error("司机分配重复，请检查");
            return;
          }
          hash[this.mapArray[i].userId] = true;
        }
      }

      {
        var hash = {};
        for (var i in this.mapArray) {
          if (hash[this.mapArray[i].carId]) {
            that.$message.error("车辆分配重复，请检查");
            return;
          }
          hash[this.mapArray[i].carId] = true;
        }
      }

      that.showFullLoading();
      dispatchOrderApi(
        this.mSelectRow.id,
        mapArray,
        getRequestHeader(),
        new (function () {
          this.fail = function (msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function (data) {
            that.clsoeFullLoading();
            that.mDispatchDialog = false;
            that.$message.success("分配成功");
            that.queryControllerOrders();
          };
        })()
      );
    },

    closeOrder() {
      var that = this;
      this.showFullLoading();
      closeOrderApi(
        this.mSelectRow.id,
        getRequestHeader(),
        new (function () {
          this.fail = function (msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function (data) {
            that.clsoeFullLoading();
            that.mCloseDialog = false;
            that.mDispatchDialog = false;
            that.$message.success("关闭成功");
            that.queryControllerOrders();
          };
        })()
      );
    },
    thirdDispatch(order) {},
    dispatchThirdCompany() {
      var that = this;
      if (!this.mSelectRow.thirdCompanyId) {
        this.$message.error("请选择三方公司");
        return;
      }
      that.showFullLoading();
      dispatchThirdCompanyApi(
        this.mSelectRow.id,
        this.mSelectRow.thirdCompanyId,
        getRequestHeader(),
        new (function () {
          this.fail = function (msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function (data) {
            that.clsoeFullLoading();
            that.mDispatchDialog = false;
            that.$message.success("分配成功");
            that.queryControllerOrders();
          };
        })()
      );
    },
    handleTabClick() {},
    showCtrlDialog(row) {
      // this.selectRow(row);
      this.mSelectRow = row;
      this.mDispatchDialog = true;
      // 初始化表格
      var o = {};
      o.opType = "add";
      this.mTmpCtrls = [];
      this.mTmpCtrls.push(o);
    },
    showCarSelelctDialog() {
      var that = this;
      this.mCarSelectDialog = true;
      that.mCurrentDateCar = formatDateFromDate(
        new Date(that.mSelectRow.setoffTime)
      );
      this.pageCar = 1;
      this.getCars();
    },
    showDriverSelelctDialog() {
      var that = this;
      that.mCurrentDateDriver = formatDateFromDate(
        new Date(that.mSelectRow.setoffTime)
      );
      this.mDriverSelectDialog = true;
      this.pageDriver = 1;
      this.getDrivers();
    },
    pageCarIndexChange() {
      this.getCars();
    },
    pageDriverIndexChange() {
      this.getDrivers();
    },
    selectCar(row) {
      var o = this.mTmpCtrls[this.mTmpCtrls.length - 1];
      o.car = row;
      this.$set(this.mTmpCtrls, this.mTmpCtrls.length - 1, o);
      this.mCarSelectDialog = false;
    },
    selectDriver(row) {
      var o = this.mTmpCtrls[this.mTmpCtrls.length - 1];
      o.driver = row;
      this.$set(this.mTmpCtrls, this.mTmpCtrls.length - 1, o);
      this.mDriverSelectDialog = false;
    },
    confirmAddLine() {
      var o = this.mTmpCtrls[this.mTmpCtrls.length - 1];
      o.opType = "show";
      var o1 = {};
      o1.opType = "add";
      this.mTmpCtrls.push(o1);
    },
    delfirmLine(index) {
      this.mTmpCtrls.splice(index, 1);
      if (this.mTmpCtrls.length <= 0) {
        var o1 = {};
        o1.opType = "add";
        this.mTmpCtrls.push(o1);
      }
    },
    refreshCars(lst) {
      var that = this;
      // 只保留到天数

      lst.forEach((element) => {
        that.mTmpCtrls.forEach((e2) => {
          if (e2.opType == "show" && e2.car && e2.car.carId == element.carId) {
            element.carUsingStatus = "using1";
          }
        });

        element.strInfo = element.name + "（" + element.brand + "）";
        if (element.lstCD_relation) {
          element.s0_7 = true;
          element.s8 = true;
          element.s9 = true;
          element.s10 = true;
          element.s11 = true;
          element.s12 = true;
          element.s13 = true;
          element.s14 = true;
          element.s15 = true;
          element.s16 = true;
          element.s17 = true;
          element.s18 = true;
          element.s19 = true;
          element.s20 = true;
          element.s21_0 = true;
          element.lstCD_relation.forEach((e2) => {
            if (e2.setoffTime && e2.backTime) {
              // 2020-05-25 10:00 2020-05-25 22:00
              // 2020-05-25 10:00:00 2020-05-25 10:59:59
              var tStart = new Date(e2.setoffTime).getTime();
              var tEnd = new Date(e2.backTime).getTime();

              // console.log(e2.setoffTime + "   " + e2.backTime);
              console.log(
                that.mCurrentDateCar +
                  " 00:00:00" +
                  "     " +
                  that.mCurrentDateCar +
                  " 07:59:59"
              );
              {
                var t1 = new Date(that.mCurrentDateCar + " 00:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 07:59:59").getTime();

                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s0_7 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 08:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 08:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s8 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 09:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 09:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s9 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 10:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 10:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s10 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 11:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 11:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s11 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 12:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 12:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s12 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 13:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 13:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s13 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 14:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 14:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s14 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 15:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 15:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s15 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 16:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 16:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s16 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 17:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 17:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s17 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 18:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 18:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s18 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 19:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 19:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s19 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 20:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 20:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s20 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDateCar + " 21:00:00").getTime();
                var t2 = new Date(that.mCurrentDateCar + " 23:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s21_0 = false;
                }
              }
            }
          });
        }
      });
      return lst;
    },
    refreshDrivers(lst) {
      var that = this;
      lst.forEach((element) => {
        that.mTmpCtrls.forEach((e2) => {
          if (
            e2.opType == "show" &&
            e2.driver &&
            e2.driver.userId == element.userId
          ) {
            element.userUseStatus = "using1";
          }
        });

        element.strInfo = element.name + "（" + element.brand + "）";
        if (element.lstCD_relation) {
          element.s0_7 = true;
          element.s8 = true;
          element.s9 = true;
          element.s10 = true;
          element.s11 = true;
          element.s12 = true;
          element.s13 = true;
          element.s14 = true;
          element.s15 = true;
          element.s16 = true;
          element.s17 = true;
          element.s18 = true;
          element.s19 = true;
          element.s20 = true;
          element.s21_0 = true;
          element.lstCD_relation.forEach((e2) => {
            if (e2.setoffTime && e2.backTime) {
              // 2020-05-25 10:00 2020-05-25 22:00
              // 2020-05-25 10:00:00 2020-05-25 10:59:59
              var tStart = new Date(e2.setoffTime).getTime();
              var tEnd = new Date(e2.backTime).getTime();

              // console.log(e2.setoffTime + "   " + e2.backTime);
              console.log(
                that.mCurrentDateDriver +
                  " 00:00:00" +
                  "     " +
                  that.mCurrentDateDriver +
                  " 07:59:59"
              );
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 00:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 07:59:59"
                ).getTime();

                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s0_7 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 08:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 08:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s8 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 09:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 09:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s9 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 10:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 10:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s10 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 11:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 11:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s11 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 12:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 12:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s12 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 13:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 13:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s13 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 14:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 14:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s14 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 15:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 15:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s15 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 16:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 16:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s16 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 17:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 17:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s17 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 18:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 18:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s18 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 19:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 19:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s19 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 20:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 20:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s20 = false;
                }
              }
              {
                var t1 = new Date(
                  that.mCurrentDateDriver + " 21:00:00"
                ).getTime();
                var t2 = new Date(
                  that.mCurrentDateDriver + " 23:59:59"
                ).getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s21_0 = false;
                }
              }
            }
          });
        }
      });
      return lst;
    },
    searchDrivers() {
      this.page = 1;
      this.mDriverFilter.searchKey = this.mSearchDriverKey;
      this.getDrivers();
    },
    searchCars() {
      this.page = 1;
      this.mCarFilter.searchKey = this.mSearchCarKey;
      this.getCars();
    },
    nextDayCar() {
      if (!this.mCurrentDateCar) {
        return;
      }
      var date = new Date(Date.parse(this.mCurrentDateCar.replace(/-/g, "/")));
      date.setDate(date.getDate() + 1);
      this.mCurrentDateCar = formatDateFromDate(date);
      this.searchCars();
    },
    preDayCar() {
      if (!this.mCurrentDateCar) {
        return;
      }
      var date = new Date(Date.parse(this.mCurrentDateCar.replace(/-/g, "/")));
      date.setDate(date.getDate() - 1);
      this.mCurrentDateCar = formatDateFromDate(date);
      this.searchCars();
    },
    nextDayCarDriver() {
      if (!this.mCurrentDateDriver) {
        return;
      }
      var date = new Date(
        Date.parse(this.mCurrentDateDriver.replace(/-/g, "/"))
      );
      date.setDate(date.getDate() + 1);
      this.mCurrentDateDriver = formatDateFromDate(date);
      this.searchDrivers();
    },
    preDayDriver() {
      if (!this.mCurrentDateDriver) {
        return;
      }
      var date = new Date(
        Date.parse(this.mCurrentDateDriver.replace(/-/g, "/"))
      );
      date.setDate(date.getDate() - 1);
      this.mCurrentDateDriver = formatDateFromDate(date);
      this.searchDrivers();
    },
    today() {
      this.mCurrentDateCar = getNowFormatDate();
      this.mCurrentDateDriver = getNowFormatDate();
    },
    //----------over methods------
  },
};
</script>